

// banner图
.banner{
    // margin-top: 92px;
    margin-top: 142px;
    position: relative;
    width: 100%;
    height: 376px;
    background: url(../img/banner1.jpg) 50% 0 repeat-x;;
    // background-size: cover;
    .section_inner {
        // position: relative;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        h2 {
            font-weight: 200;
            color: #fff;
            font-size: 48px;
            text-align: center;
            width: 494px;
            height: 60px;
            margin-top: 103px;
        }
        p {
            width: 260px;
            height: 26px;
            margin-top: 20px;
            text-align: center;
            font-size: 22px;
            color: #f0f0f0;
        }
        button {
            width: 174px;
            height: 52px;
            border-radius: 2px;
            margin-top: 30px;
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, .2);
            // opacity: .2;
            color: #f0f0f0;
            transition: all .5s;
            &:hover {
                border: 1px solid rgba(255, 255, 255, 1);
            }
        }
    }
}

// 搜索引擎
.search{
    font-size: 14px;
    line-height: 1.5;
    padding: 60px 0 20px 40px;
    .singer-list {
        overflow: hidden;
        a {
            cursor:pointer;
            float: left;
            height: 26px;
            line-height: 27px;
            padding: 0 8px;
            margin: 0 12px 14px 0;
        }
    }
}


// 主体内容
.content {
    padding-left: 30px;
    overflow: hidden;
    .content-list {
        float: left;
        display: flex;
        width: 190px;
        height: 245px;
        padding: 25px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        a {
            &:nth-child(1) {
                width: 140px;
                height: 140px;
                margin-bottom: 15px;
                img {
                    width: 140px;
                    height: 140px;
                    border-radius: 50%;
                }
            }
        }
    }
}

// 文本内容
.content-text {
    display: flex;
    .content-text-list {
        width: 25%;
        a {
            display: block;
            font-size: 14px;
            line-height: 36px;
            &:hover {
                color: #31c27c;
            }
        }
    }
}


// 底部导航栏
.footer {
    background-color: #333;
    color: #999;
    .footer-top {
        width: 100%;
        display: flex;
        height: 512px;
        justify-content: space-between;
        h3 {
            font-size: 15px;
            font-weight: 400;
            padding: 80px 0 30px;
        }
        .footer-img {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
            a {
                &:hover {
                    color: #31c27c;
                }
                color: #999;
                width: 95px;
                height: 81px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center; 
                i {
                    width: 37px;
                    height: 48px;
                }
            }
        }
        .footer-list {
            font-size: 14px;
            a{
                &:hover {
                    color: #31c27c;
                }
                color: #999;
                margin-right: 20px;
            }
        }

        .footer-client {
            width: 360px;
            .footer-img {
                a {
                    &:nth-child(1) {
                        i{
                            background: url(../img/footer1.png) no-repeat -3px -5px;
                        }
                    }
                    &:nth-child(1):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -3px -54px;
                        }
                    }
                    &:nth-child(2) {
                        i{
                            width: 46px;
                            background: url(../img/footer1.png) no-repeat -92px -5px;
                        }
                    }
                    &:nth-child(2):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -92px -54px;
                        }
                    }
                    &:nth-child(3) {
                        i{
                            background: url(../img/footer1.png) no-repeat -190px -5px;
                        }
                    }
                    &:nth-child(3):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -190px -54px;
                        }
                    }
                    &:nth-child(4) {
                        i{
                            background: url(../img/footer1.png) no-repeat -278px -5px;
                        }
                    }
                    &:nth-child(4):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -278px -54px;
                        }
                    }
                }
            }
        }
        .footer-product {
            font-size: 14px;
            position: relative;
            width: 360px;
            .footer-img {
                a {
                    &:nth-child(1) {
                        i{
                            width: 41px;
                            background: url(../img/footer1.png) no-repeat -369px -5px;
                        }
                    }
                    &:nth-child(1):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -369px -54px;
                        }
                    }
                    &:nth-child(2) {
                        i{
                            width: 46px;
                            background: url(../img/footer1.png) no-repeat -461px -5px;
                        }
                    }
                    &:nth-child(2):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -461px -55px;
                        }
                    }
                    &:nth-child(3) {
                        i{
                            width: 40px;
                            background: url(../img/footer1.png) no-repeat -562px -5px;
                        }
                    }
                    &:nth-child(3):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -562px -54px;
                        }
                    }
                    &:nth-child(4) {
                        i{
                            width: 40px;
                            background: url(../img/footer1.png) no-repeat -650px -5px;
                        }
                    }
                    &:nth-child(4):hover {
                        i{
                            background: url(../img/footer1.png) no-repeat -650px -54px;
                        }
                    }
                }
            }
            h3 {
                &:nth-child(3){
                    padding-left: 35px;
                }
            }
            .footer-list {
                padding-left: 35px;
            }
            .footer-absolute{
                position: absolute;
                left: 17px;
                top: 228px;
                a {
                    &:hover {
                        color: #31c27c;
                    }
                    color: #999;
                    &:nth-child(1){
                        margin-right: 21px;
                    }
                }
            }
        }
        .footer-link {
            width: 300px;
            ul {
                width: 100%;
                li {
                    font-size: 14px;
                    width: 100px;
                    float: left;
                    margin-bottom: 8px;
                    a {
                        &:hover {
                            color: #31c27c;
                        }
                        color: #999;
                    }
                }
            }
        }
       
    }
    .footer-bottom {
        padding-bottom: 30px;
        p {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            text-align: center;
            a {
                &:hover {
                    color: #31c27c;
                }
                color: #999;
            }
        }
    }
}